<div class="email-form">
  <form nz-form [formGroup]="emailConfigForm" role="form">
    <div class="email-input">
      <nz-form-item style="width:180px;padding-right: 30px">
        <nz-form-label nzFor="" nzRequired>邮件协议</nz-form-label>
        <nz-form-control>
          <nz-select nzShowSearch nzAllowClear formControlName="protocol" class="form-select"
            [(ngModel)]="defaultValue">
            <nz-option nzCustomContent nzLabel="SMTP" nzValue="SMTP">SMTP</nz-option>
            <nz-option nzCustomContent nzLabel="SMTPS" nzValue="SMTPS">SMTPS</nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item style="width:180px;">
        <nz-form-label nzFor="" nzRequired>端口</nz-form-label>
        <nz-form-control>
          <nz-input-number formControlName="port" [nzStep]="1"></nz-input-number>
          <nz-form-explain>
            <span class="text-white-list" *ngIf="!emailConfigForm.get('port').hasError('required')">smtp端口号使用</span>
            <span class="text-danger" *ngIf="emailConfigForm.get('port').hasError('required')">带*字段为必填项!</span>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>

    <nz-form-item style="width: 330px;">
      <nz-form-label nzFor="" nzRequired>主机名</nz-form-label>
      <nz-form-control>
        <input type="text" nz-input nzSize="default" formControlName="hostName" autocomplete="off" placeholder="cve评分" required>
        <nz-form-explain>
          <span class="text-white-list">您的邮件服务器的SMTP主机名称</span>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control>
        <label nz-checkbox [(ngModel)]="checked" formControlName="TLS">TLS 选择-邮件服务器需要使用tls安全</label>
      </nz-form-control>
    </nz-form-item>

    <nz-divider nzText="发件人管理" nzOrientation="left"></nz-divider>

    <nz-form-item style="width:300px;">
      <nz-form-label nzFor="" nzRequired>发送人名称</nz-form-label>
      <nz-form-control>
        <input type="text" nz-input nzSize="default" formControlName="senderName" autocomplete="off" placeholder="sca">
        <nz-form-explain
          *ngIf="!(emailConfigForm.get('senderName').valid || emailConfigForm.get('senderName').untouched)">
          <span class="text-danger" *ngIf="emailConfigForm.get('senderName').hasError('required')">带*字段为必填项!</span>
        </nz-form-explain> 
      </nz-form-control>
    </nz-form-item>

    <nz-form-item style="width:300px;">
      <nz-form-label nzFor="" nzRequired>发送人邮箱</nz-form-label>
      <nz-form-control>
        <input type="text" nz-input nzSize="default" formControlName="senderEmail" autocomplete="off" placeholder="密码">
        <nz-form-explain
          *ngIf="!(emailConfigForm.get('senderEmail').valid || emailConfigForm.get('senderEmail').untouched)">
          <span class="text-danger" *ngIf="emailConfigForm.get('senderEmail').hasError('required')">带*字段为必填项!</span>
          <span class="text-danger" *ngIf="emailConfigForm.get('senderEmail').hasError('email')">邮箱格式不正确!</span>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>    

    <nz-form-item style="width: 200px;">
      <nz-form-label nzFor="" nzRequired>发送人密码</nz-form-label>
      <nz-form-control>
        <input type="password" nz-input nzSize="default" formControlName="senderPassword" autocomplete="off"
          placeholder="密码">
        <nz-form-explain
          *ngIf="!(emailConfigForm.get('senderPassword').valid || emailConfigForm.get('senderPassword').untouched)">
          <span class="text-danger" *ngIf="emailConfigForm.get('senderPassword').hasError('required')">带*字段为必填项!</span>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control>
        <button nz-button nzType="primary" class="modal-footer-btn" (click)="editConfig()" [disabled]="!emailConfigForm.valid">确&nbsp;&nbsp;&nbsp;&nbsp;定</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</div>
